<!--
 * @Author: your name
 * @Date: 2022-02-24 14:31:16
 * @LastEditTime: 2022-03-06 18:51:24
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \briup-study\day04\5-伸缩盒布局.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伸缩盒也叫弹性盒子</title>
<style>
    .parent{
        border: 1px solid red;
        height: 300px;
        display: flex;
        /* 给父容器设置主轴x 的排列方式 */
        flex-direction: row;
        /* 
        flex-direction: row-reverse;
        flex-direction: column;
        flex-direction: column-reverse; */

        /* 设置是否自动换行 此时的伸缩盒就变为好几个了 */
        flex-wrap: nowrap;
        /* flex-wrap: wrap; */
        /* 多主轴的对齐方式 */
        align-content: flex-start;
        align-content: flex-end;
        align-content: center;
        align-content: space-around;
        align-content: space-between;
    }
    .child{
        background-color: pink;
        /* 设置占父容器剩余空间的比列
        设置给子元素的属性 */
        flex: 200px 1;
        height: 100px;
    }
    .child:nth-child(odd){
        background-color: rgb(84, 192, 219);
        flex: 2; 
    }
</style>
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
    </div>
</body>
</html>